<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>index</title>
  <!-- 引入Vue -->
  <script type="text/javascript" src="../../js/vue.js"></script>
</head>

<body>
  <!-- 准备好一个容器-->
  <div id="demo">
    <button-counter></button-counter>
    <button-counter></button-counter>
    <button-counter></button-counter>
    <button-counter></button-counter>
  </div>
</body>

<script type="text/javascript">

  // 创建Vue组件
  const ButtonCounter = ('button-counter', {

    data() {
      return {
        count: 0
      }
    },

    methods: {
      increment() {
        this.count++
      }
    },

    template: `
  <button @click="increment">
    You clicked me {{ count }} times.
  </button>
`
  })
  // 创建Vue实例
  new Vue({
    el: '#demo',
    components: {
      'button-counter': ButtonCounter
    }
  })
</script>

</html>